* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

a {
	text-decoration: none;
}

// banner
.banner {
	width: 100%;
	height: 30vw;
}

.banner .banner-bg {
	width: 100%;
	height: 30vw;
	background: url(/blog/public/img/code-wallpaper.png) no-repeat center / cover;
	position: absolute;
	z-index: -1;
}

.main-box {
	display: flex;
	margin-top: 30px;
}

// 左侧用户信息
.info-box {
	width: 250px;

	#user-box {
		box-shadow: 0 0 1rem rgb(161 177 204 / 40%);
		background-color: #fff;
		border-radius: 13px;
		overflow: hidden;
		white-space: normal;

		.avatar-box {
			width: 250px;
			height: 250px;
			padding: 30px;

			.avatar {
				width: 100%;
				height: 100%;
				border: 1px;
				border-radius: 50%;
			}
		}

		.username {
			margin-top: 20px;
			text-align: center;
			font-size: 1.2em;
			color: #9145B6;
		}

		.email {
			margin-top: 20px;
			text-align: center;
			font-size: 1em;
			color: #999;
		}

		.status-box {
			display: flex;
			padding: 30px;
			justify-content: space-between;

			.status-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.status-count {
					color: #999;
					margin-top: 10px;
				}
			}
		}

		.btn-box{
			padding-bottom: 20px;
			padding-left: 20px;
			padding-right: 20px;
			width: 100%;
			button{
			  width: 100%;
			}
		  }

	}

	.category-box {
		margin-top: 30px;
		padding: 30px;
		box-shadow: 0 0 1rem rgb(161 177 204 / 40%);
		background-color: #fff;
		border-radius: 13px;
		overflow: hidden;
		white-space: normal;

		.box-title {
			color: #B958A5;
			font-size: 1.3em;
		}

		.category-item {
			display: flex;
			align-items: center;
			margin-top: 20px;
			justify-content: space-between;

			.category-name {
				font-size: 1.2em;
				color: #4C3F91;

				a:link {
					color: #4C3F91 !important;
					text-decoration: none !important;
				}

				/* 访问过 */
				a:visited {
					color: #4C3F91 !important;
					text-decoration: none !important;
				}

				/* 鼠标悬停 */
				a:hover {
					color: #FF5677 !important;
					text-decoration: none !important;
				}
			}

			.category-count {
				background-color: rgba(255, 78, 106, .1);
				display: inline-block;
				width: 26px;
				height: 26px;
				line-height: 26px;
				text-align: center;
				border-radius: 100%;
				color: #B958A5;
			}
		}
	}
}

// 右侧博客展示
/* item项样式 */
#blog-box {
	margin-left: 30px;
	width: 100%;

	#tabbar {
		margin-bottom: 20px;
		box-shadow: 0 0 1rem rgb(161 177 204 / 40%);
		background-color: #fff;
		border-radius: 13px;
		display: flex;
		justify-content: space-around;

		.tabbar-item {
			span {
				margin-right: 5px;
			}

			margin-right: 20px;
			padding: 20px;
			border-bottom: 3px solid #B958A5;

			a:link {
				color: #333;
				text-decoration: none !important;
			}

			a:visited {
				color: #333;
				text-decoration: none !important;
			}

			a:hover {
				color: #FF5677 !important;
				text-decoration: none !important;
			}
		}

		.active {
			a:link {
				color: #FF5677 !important;
				text-decoration: none !important;
			}

			a:visited {
				color: #FF5677;
				text-decoration: none !important;
			}

			color: #FF5677 !important;
			border-bottom: 3px solid #FF5677;
		}
	}

	.item-box {
		margin-bottom: 30px;
		box-shadow: 0 0 1rem rgb(161 177 204 / 40%);
		background-color: #fff;
		border-radius: 13px;
		padding: 30px;

		.item-title {
			font-size: 28px;
			text-align: center;
			font-weight: bold;
		}

		.item-title {
			a:link {
				color: #333 !important;
				text-decoration: none !important;
			}

			a:visited {
				color: #333 !important;
				text-decoration: none !important;
			}

			a:hover {
				color: #FF5677 !important;
				text-decoration: none !important;
			}
		}

		.item-content {
			margin-top: 20px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
		}

		.icon-box {
			margin-top: 20px;
			display: flex;

			div {
				margin-right: 20px;
				font-size: 18px;
				color: #999;
			}

			span {
				margin-right: 10px;
			}

			.item-tags {
				a:link {
					color: #999 !important;
					text-decoration: none !important;
				}

				/* 访问过 */
				a:visited {
					color: #999 !important;
					text-decoration: none !important;
				}

				/* 鼠标悬停 */
				a:hover {
					color: #FF5677 !important;
					text-decoration: none !important;
				}
			}
		}

		.btn-box {
			display: flex;
			justify-content: right;

			button {
				margin-right: 5px;
			}
		}

		.subscribe-box {
			padding-top: 15px;
			padding-bottom: 15px;
			padding-left: 20px;
			padding-right: 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left {
				display: flex;
				.avatar-box {
					height: 70px;
					width: 70px;
					img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.userinfo-box {
					margin-left: 20px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.username {
						color: #333;
						font-size: 19px;
					}

					.status-box {
						display: flex;
						.status-item{
							display: flex;
							margin-right: 10px;
							.status-count{
								margin-left: 5px;
							}
						}
					}
				}
			}
			.btn-box {}
		}
	}
}

#update-mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    display: none;
}

.pop-panel {
    width: 400px;
    border-radius: 25px;
    background: #fff;
    padding: 20px;
	h2{
		margin-bottom: 20px;
	}
    .btn-group{
        display: flex;
        justify-content: right  ;
		margin-top: 20px;
    }
}